/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <el-dialog
    :title="form.id?'修改项目级别参数' :'创建项目级别参数'"
    v-if="closeDialog"
    :visible.sync="closeDialog"
    append-to-body
    width="440px"
  >
    <m-popover
      ref="popover"
      @close="close"
      @ok="_ok"
      minWidth="400px"
    >
      <template slot="content">
        <div class="box">
          <el-form
            ref="form"
            :model="form"
            label-width="120px"
            size="mini"
            label-position="left"
            :rules="rules"
          >
            <el-form-item
              label="参数名称"
              prop="name"
            >
              <el-input
                v-model="form.name"
                placeholder="请输入参数名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="参数值"
              prop="value"
            >
              <el-input
                v-model="form.value"
                placeholder="请输入参数名称"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </m-popover>
  </el-dialog>
</template>
<script>
  import mPopover from '@/module/components/popup/popover'
  export default {
    name: 'create-dialog',
    data () {
      return {
        closeDialog: false,
        item: null,
        form: {
          id: '',
          name: '',
          value: '',
        },
        info: {},
        rules: {
          name: [
            { required: true, message: '请输入参数名称', trigger: 'blur' },
          ],
          value: [
            { required: true, message: '请输入参数值', trigger: 'blur' },
          ],
        }
      }
    },
    methods: {
      show (item) {
        this.form = Object.assign({}, this.form, item)
        this.closeDialog = true
      },
      _ok () {
        this.$refs.form.validate(async (valid) => {
          if (!valid) return
          try {
            /* 新增逻辑 */
            if (!this.form.id) {
              console.log('新增参数', this.form)
              this.close()
            } else {
              console.log('编辑参数', this.form)
              this.close()
            }
          } catch (error) {
            console.log('error===>', error)
          }
        })
      },
      close () {
        this.form = {
          id: '',
          name: '',
          value: ''
        }
        this.$refs.form.clearValidate()
        this.closeDialog = false
      }
    },
    components: { mPopover }
  }
</script>
<style lang="scss" scoped>
/deep/.border {
  border-bottom: 1px dashed #dadada;
  padding-top: 8px !important;
  .el-form-item--mini.el-form-item {
    margin-bottom: 3px !important;
  }
}
/deep/.el-input-number .el-input__inner {
  text-align: left;
}
.box {
  padding: 0 20px;
  padding-top: 15px;
  .title {
    width: 64px;
    height: 20px;
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-600;
    font-weight: 600;
    text-align: LEFT;
    color: #333333;
    line-height: 20px;
    margin-bottom: 10px;
  }
}
/deep/.el-form-item--mini.el-form-item {
  margin-bottom: 15px;
}
</style>
